<template>
	<view class="module-block">
		<view class="module-info">
			<view class="module-title">车辆及司机信息</view>
			<view class="traveller-group">
				<view class="traveller-subs">请务必保证填写项与所持证件一致</view>
				<view class="traveller-list">
					<block v-for="(item,index) in suitList" :key="index">
					<view class="traveller-item"  v-if="item.fill_car_type !=0 && item.num>0">
						<view class="ticket-name">{{item.name}}</view>
						<view class="ticket-traveller">							
							<view class="traveller" v-for="(titem,tindex) in item.carList" :key="tindex">
								<view class="reduce iconfont" @click="reduceCar(index,tindex)">&#xe64a;</view>
								<view class="info" @click="editCar(titem,index,tindex)">
									<view class="top">{{titem.carnumber}}</view>
									<view class="bottom"> <block>{{titem.cartype}}{{titem.size}}mm</block></view>
								</view>
								<view class="iconfont" @click="editCar(titem,index,tindex)">&#xe67f;</view>
							</view>							
							<view class="add" v-if="item.fill_car_type == 1 && parseInt(item.num) > item.carList.length" @click="jumpCar(index)">
								还需选择{{parseInt(item.num) - item.carList.length}}辆车<text class="iconfont">&#xe67f;</text>
							</view>
						</view>
					</view>
					<view class="traveller-item" v-if="item.fill_tourer_type !=0 && item.drivernum>0">
						<view class="ticket-name">司机</view>
						<view class="ticket-traveller">
							<view class="traveller" v-for="(ditem,dindex) in item.tourList" :key="dindex" >
								<view class="reduce iconfont" @click="reduceTourer(index,dindex)">&#xe64a;</view>
								<view class="info" @click="editTourer(ditem,index,dindex)">
									<view class="top">{{ditem.linkman}} <block v-if="ditem.en_last_name">{{ditem.en_last_name}}/{{ditem.en_first_name}}</block></view>
									<view class="bottom">{{ditem.cardtype}}{{ditem.idcard}}</view>
								</view>
								<view class="iconfont" @click="editTourer(ditem,index,dindex)">&#xe67f;</view>
							</view>							
							<view class="add" v-if="item.fill_tourer_type == 1 && item.tourList.length<=0" @click="jumpTraveller(index)">还需选择1位司机<text class="iconfont">&#xe67f;</text>
							</view>
							<view class="add" v-if="item.fill_tourer_type == 2 && parseInt(item.drivernum) > item.tourList.length" @click="jumpTraveller(index)">
								还需选择{{parseInt(item.drivernum) - item.tourList.length}}位司机<text class="iconfont">&#xe67f;</text>
							</view>							
						</view>
					</view>
					</block>
				</view>
			</view>
		</view>	
	</view>
</template>
<script>
	/**
	 * 门票旅客信息
	 * 
	 */
	export default {
		name: 'stFerryTravellerInfo',
		props:{
			suitList:{
				type: Array,
				default (){
					return []
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			// 删除旅客信息
			reduceTourer(index,tindex){
				this.$emit('reduceTourer',index,tindex);
			},
			
			// 跳转游客编辑页面
			editTourer(titem,index,tindex){
				this.$emit('editTourer',titem,index,tindex);
			},
			
			// 跳转旅客选择页面
			jumpTraveller(index){
				this.$emit('jumpTraveller',index);
			},
			// 删除车辆信息
			reduceCar(index,tindex){
				this.$emit('reduceCar',index,tindex);
			},
			
			// 跳转车辆编辑页面
			editCar(titem,index,tindex){
				this.$emit('editCar',titem,index,tindex);
			},
			
			// 跳转车辆选择页面
			jumpCar(index){
				this.$emit('jumpCar',index);
			}
			
		}
	}
</script>
<style lang="scss" scoped>
.module-block{
	padding: 0 24rpx;
	margin-bottom: 20rpx;
	.module-info{
		padding: 28rpx 24rpx 0;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		.module-title{
			line-height: 1.24;
			font-size: 34rpx;
			font-weight: bold;
		}
		.traveller-group{
			margin-top: 28rpx;
			.traveller-subs{
				line-height: 2.67;
				padding: 0 20rpx;
				font-size: $uni-font-size-sm;
				color: #ff4a50;
				border-radius: 10rpx;
				background-color: #ffefec;
				.iconfont{
					margin: 0 10rpx 0 6rpx;
					color: $uni-text-color-price;
				}
			}
			.traveller-list{
				.traveller-item{
					padding: 10rpx 0;
					@extend .justifyspacec;
					border-bottom: 1px solid #efefef;
					&:last-child{
						border-bottom: none;
					}
					.ticket-name{
						width: 160rpx;
						font-size: $uni-font-size-base;
						font-weight: 700;
						color: #222;
						line-height: 44rpx;
					}
					.ticket-traveller{
						width: 474rpx;
						.traveller{
							@extend .justifyspacec;
							padding: 20rpx 0;
							border-bottom: 1px solid #efefef;
							&:last-child{
								border-bottom: none;
							}
							.reduce{
								@extend .alignJustify;
								width: 48rpx;
								height: 48rpx;
								border: 1px solid #e5e5e5;
								background-color: #F9F9F9;
								color: $uni-text-color-grey;
								border-radius: 50%;
								margin-right: 20rpx;
							}
							.info{
								width: 400rpx;
								font-size: $uni-font-size-base;
								color: #333333;
								line-height: 44rpx;
								.bottom{
									font-size: $uni-font-size-sm;
									color: $uni-text-color-deep;
								}
							}
						}
						.add{
							height: 84rpx;
							line-height: 84rpx;
							font-size: $uni-font-size-base;
							color: $uni-text-color-grey;
							position: relative;
							.iconfont{
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
					.iconfont{
						color: #a0a0a0;
					}
				}
			}
		}
	}
}
</style>
